kirkiPostMessage.css.fromOutput - Code Metrics - Inspection of "postMessage refactor" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Test Setup Failed

Pull Request — develop (#1708)

by Aristeides

created 2018-01-20 23:44 UTC

kirkiPostMessage.css.fromOutput A

↳ Parent: kirkiPostMessage.css.fromOutput

Complexity

Conditions	3
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	4
Bugs	0	Features	0

Metric	Value
cc	3
c	4
b	0
f	0
nc	2
nop	2
dl	0
loc	6
rs	9.4285

/* global kirkiPostMessageFields, WebFont */
var kirkiPostMessage = {
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

	/**
	 * The fields.
	 *
	 * @since 3.0.20
	 */
	fields: {},

	/**
	 * A collection of methods for the <style> tags.
	 *
	 * @since 3.0.20
	 */
	styleTag: {

		/**
		 * Add a <style> tag in <head> if it doesn't already exist.
		 *
		 * @since 3.0.20
		 * @param {string} id - The field-ID.
		 * @returns {void}
		 */
		add: function( id ) {
			if ( null === document.getElementById( 'kirki-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
				jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
			}
		},

		/**
		 * Add a <style> tag in <head> if it doesn't already exist,
		 * by calling the this.add method, and then add styles inside it.
		 *
		 * @since 3.0.20
		 * @param {string} id - The field-ID.
		 * @param {string} styles - The styles to add.
		 * @returns {void}
		 */
		addData: function( id, styles ) {
			kirkiPostMessage.styleTag.add( id );
			jQuery( '#kirki-postmessage-' + id ).text( styles );
		}
	},

	/**
	 * Common utilities.
	 *
	 * @since 3.0.21
	 */
	util: {

		/**
		 * Processes the value and applies any replacements and/or additions.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.

		 * @returns {string}
		 */
		processValue: function( output, value ) {
			var settings = window.parent.wp.customize.get();
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

			if ( 'string' !== typeof value ) {
				return value;
			}
			output = _.defaults( output, {

				prefix: '',
				units: '',
				suffix: '',
				value_pattern: '$',
				pattern_replace: {}
			} );

			value = output.value_pattern.replace( /$/g, value );

			_.each( output.pattern_replace, function( placeholder, id ) {
				if ( ! _.isUndefined( settings[ id ] ) ) {
					value = value.replace( placeholder, settings[ id ] );

				}
			} );
			return output.prefix + output.units + value + output.suffix;
		},

		/**
		 * Make sure urls are properly formatted for background-image properties.
		 *
		 * @since 3.0.21
		 * @param {string} url - The URL.
		 * @returns {string}
		 */
		backgroundImageValue: function( url ) {
			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
		}
	},

	/**
	 * A collection of utilities for CSS generation.
	 *
	 * @since 3.0.21
	 */
	css: {

		/**
		 * Generates the CSS from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.
		 * @returns {string}
		 */
		fromOutput: function( output, value, controlType ) {
			var styles      = '',
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    kirkiParent = window.parent.kirki,
			    googleFont  = '';

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}
			switch ( controlType ) {
				case 'kirki-typography':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
					} );
					styles += '}';

					// Check if this is a googlefont so that we may load it.
					if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {

						// Calculate the googlefont params.
						googleFont = value['font-family'].replace( /\"/g, '&quot;' );
						if ( value.variant ) {
							if ( 'regular' === value.variant ) {
								googleFont += ':400';
							} else if ( 'italic' === value.variant ) {
								googleFont += ':400i';
							} else {
								googleFont += ':' + value.variant;
							}
						}
						if ( value.subsets && ! _.isEmpty( value.subsets ) ) {
							googleFont += ':' + value.subsets.join( ',' );
						}
						WebFont.load( {
							google: {
								families: [ googleFont ]
							}
						} );
					}
					break;
				case 'kirki-background':
				case 'kirki-dimensions':
				case 'kirki-multicolor':
				case 'kirki-sortable':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						if ( 'background-image' === key ) {
							val = kirkiPostMessage.util.backgroundImageValue( val );

						}

						// Mostly used for padding, margin & position properties.
						if ( output.property && '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) {
							styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
						} else {
							styles += key + ':' + kirkiPostMessage.util.processValue( output, val ); +';';
						}
					} );
					styles += '}';
					break;
				default:
					if ( 'kirki-image' === controlType ) {
						value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );

					}
					styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
					break;
			}
			return styles;
		}
	},

	/**
	 * A collection of utilities to change the HTML in the document.
	 *
	 * @since 3.0.21
	 */
	html: {

		/**
		 * Modifies the HTML from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}

			if ( _.isObject( value ) || _.isArray( value ) ) {
				if ( ! output.choice ) {
					return;
				}
				_.each( value, function( val, key ) {
					if ( output.choice && key !== output.choice ) {
						return;
					}
					value = val;

				} );
			}
			value = kirkiPostMessage.util.processValue( output, value );

			if ( output.attr ) {
				jQuery( output.element ).attr( output.attr, value );
			} else {
				jQuery( output.element ).html( value );
			}
		}
	},

	/**
	 * A collection of utilities to allow toggling a CSS class.
	 *
	 * @since 3.0.21
	 */
	toggleClass: {

		/**
		 * Toggles a CSS class from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {
			if ( 'undefined' === typeof output['class'] || 'undefined' === typeof output.value ) {
				return;
			}
			if ( value === output.value && ! jQuery( output.element ).hasClass( output['class'] ) ) {
				jQuery( output.element ).addClass( output['class'] );
			} else {
				jQuery( output.element ).removeClass( output['class'] );
			}
		}
	}
};

jQuery( document ).ready( function() {

	_.each( kirkiPostMessageFields, function( field ) {
		wp.customize( field.settings, function( value ) {
			value.bind( function( newVal ) {
				var styles = '';
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				_.each( field.js_vars, function( output ) {
					if ( ! output['function'] || 'undefined' === typeof kirkiPostMessage[ output['function'] ] ) {
						output['function'] = 'css';
					}
					if ( 'css' === output['function'] ) {
						styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
					} else {
						kirkiPostMessage[ output['function'] ].fromOutput( output, newVal, field.type );
					}
				} );
				kirkiPostMessage.styleTag.addData( field.settings, styles );
			} );
		} );
	} );
} );


1			/* global kirkiPostMessageFields, WebFont */
2			var kirkiPostMessage = {
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
3
4			/**
5			* The fields.
6			*
7			* @since 3.0.20
8			*/
9			fields: {},
10
11			/**
12			* A collection of methods for the <style> tags.
13			*
14			* @since 3.0.20
15			*/
16			styleTag: {
17
18			/**
19			* Add a <style> tag in <head> if it doesn't already exist.
20			*
21			* @since 3.0.20
22			* @param {string} id - The field-ID.
23			* @returns {void}
24			*/
25			add: function( id ) {
26			if ( null === document.getElementById( 'kirki-postmessage-' + id ) \|\| 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
27			jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
28			}
29			},
30
31			/**
32			* Add a <style> tag in <head> if it doesn't already exist,
33			* by calling the this.add method, and then add styles inside it.
34			*
35			* @since 3.0.20
36			* @param {string} id - The field-ID.
37			* @param {string} styles - The styles to add.
38			* @returns {void}
39			*/
40			addData: function( id, styles ) {
41			kirkiPostMessage.styleTag.add( id );
42			jQuery( '#kirki-postmessage-' + id ).text( styles );
43			}
44			},
45
46			/**
47			* Common utilities.
48			*
49			* @since 3.0.21
50			*/
51			util: {
52
53			/**
54			* Processes the value and applies any replacements and/or additions.
55			*
56			* @since 3.0.21
57			* @param {Object} output - The output (js_vars) argument.
58			* @param {mixed} value - The value.
59			* @param {string} controlType - The control-type.
			0 ignored issues – show Documentation introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report The parameter `controlType` does not exist. Did you maybe forget to remove this comment? Loading history...
60			* @returns {string}
61			*/
62			processValue: function( output, value ) {
63			var settings = window.parent.wp.customize.get();
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
64
65			if ( 'string' !== typeof value ) {
66			return value;
67			}
68			output = _.defaults( output, {
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `output`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
69			prefix: '',
70			units: '',
71			suffix: '',
72			value_pattern: '$',
73			pattern_replace: {}
74			} );
75
76			value = output.value_pattern.replace( /$/g, value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
77			_.each( output.pattern_replace, function( placeholder, id ) {
78			if ( ! _.isUndefined( settings[ id ] ) ) {
79			value = value.replace( placeholder, settings[ id ] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
80			}
81			} );
82			return output.prefix + output.units + value + output.suffix;
83			},
84
85			/**
86			* Make sure urls are properly formatted for background-image properties.
87			*
88			* @since 3.0.21
89			* @param {string} url - The URL.
90			* @returns {string}
91			*/
92			backgroundImageValue: function( url ) {
93			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
94			}
95			},
96
97			/**
98			* A collection of utilities for CSS generation.
99			*
100			* @since 3.0.21
101			*/
102			css: {
103
104			/**
105			* Generates the CSS from the output (js_vars) parameter.
106			*
107			* @since 3.0.21
108			* @param {Object} output - The output (js_vars) argument.
109			* @param {mixed} value - The value.
110			* @param {string} controlType - The control-type.
111			* @returns {string}
112			*/
113			fromOutput: function( output, value, controlType ) {
114			var styles = '',
			0 ignored issues – show Coding Style introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
115			kirkiParent = window.parent.kirki,
116			googleFont = '';
117
118			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
119			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
120			}
121			switch ( controlType ) {
122			case 'kirki-typography':
123			styles += output.element + '{';
124			_.each( value, function( val, key ) {
125			if ( output.choice && key !== output.choice ) {
126			return;
127			}
128			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
129			} );
130			styles += '}';
131
132			// Check if this is a googlefont so that we may load it.
133			if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
134
135			// Calculate the googlefont params.
136			googleFont = value['font-family'].replace( /\"/g, '"' );
137			if ( value.variant ) {
138			if ( 'regular' === value.variant ) {
139			googleFont += ':400';
140			} else if ( 'italic' === value.variant ) {
141			googleFont += ':400i';
142			} else {
143			googleFont += ':' + value.variant;
144			}
145			}
146			if ( value.subsets && ! _.isEmpty( value.subsets ) ) {
147			googleFont += ':' + value.subsets.join( ',' );
148			}
149			WebFont.load( {
150			google: {
151			families: [ googleFont ]
152			}
153			} );
154			}
155			break;
156			case 'kirki-background':
157			case 'kirki-dimensions':
158			case 'kirki-multicolor':
159			case 'kirki-sortable':
160			styles += output.element + '{';
161			_.each( value, function( val, key ) {
162			if ( output.choice && key !== output.choice ) {
163			return;
164			}
165			if ( 'background-image' === key ) {
166			val = kirkiPostMessage.util.backgroundImageValue( val );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `val`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
167			}
168
169			// Mostly used for padding, margin & position properties.
170			if ( output.property && '' !== output.property && ( 'top' === key \|\| 'bottom' === key \|\| 'left' === key \|\| 'right' === key ) ) {
171			styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
172			} else {
173			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ); +';';
174			}
175			} );
176			styles += '}';
177			break;
178			default:
179			if ( 'kirki-image' === controlType ) {
180			value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
181			}
182			styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
183			break;
184			}
185			return styles;
186			}
187			},
188
189			/**
190			* A collection of utilities to change the HTML in the document.
191			*
192			* @since 3.0.21
193			*/
194			html: {
195
196			/**
197			* Modifies the HTML from the output (js_vars) parameter.
198			*
199			* @since 3.0.21
200			* @param {Object} output - The output (js_vars) argument.
201			* @param {mixed} value - The value.
202			* @returns {string}
203			*/
204			fromOutput: function( output, value ) {
205
206			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
207			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
208			}
209
210			if ( _.isObject( value ) \|\| _.isArray( value ) ) {
211			if ( ! output.choice ) {
212			return;
213			}
214			_.each( value, function( val, key ) {
215			if ( output.choice && key !== output.choice ) {
216			return;
217			}
218			value = val;
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
219			} );
220			}
221			value = kirkiPostMessage.util.processValue( output, value );
222
223			if ( output.attr ) {
224			jQuery( output.element ).attr( output.attr, value );
225			} else {
226			jQuery( output.element ).html( value );
227			}
228			}
229			},
230
231			/**
232			* A collection of utilities to allow toggling a CSS class.
233			*
234			* @since 3.0.21
235			*/
236			toggleClass: {
237
238			/**
239			* Toggles a CSS class from the output (js_vars) parameter.
240			*
241			* @since 3.0.21
242			* @param {Object} output - The output (js_vars) argument.
243			* @param {mixed} value - The value.
244			* @returns {string}
245			*/
246			fromOutput: function( output, value ) {
247			if ( 'undefined' === typeof output['class'] \|\| 'undefined' === typeof output.value ) {
248			return;
249			}
250			if ( value === output.value && ! jQuery( output.element ).hasClass( output['class'] ) ) {
251			jQuery( output.element ).addClass( output['class'] );
252			} else {
253			jQuery( output.element ).removeClass( output['class'] );
254			}
255			}
256			}
257			};
258
259			jQuery( document ).ready( function() {
260
261			_.each( kirkiPostMessageFields, function( field ) {
262			wp.customize( field.settings, function( value ) {
263			value.bind( function( newVal ) {
264			var styles = '';
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
265			_.each( field.js_vars, function( output ) {
266			if ( ! output['function'] \|\| 'undefined' === typeof kirkiPostMessage[ output['function'] ] ) {
267			output['function'] = 'css';
268			}
269			if ( 'css' === output['function'] ) {
270			styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
271			} else {
272			kirkiPostMessage[ output['function'] ].fromOutput( output, newVal, field.type );
273			}
274			} );
275			kirkiPostMessage.styleTag.addData( field.settings, styles );
276			} );
277			} );
278			} );
279			} );
280

aristath / kirki

Pull Request — develop (#1708)

kirkiPostMessage.css.fromOutput A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like